<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.box{
			background-image: url(images/bg.jpg);
			background-size: 100% 100%;
		}
	
		/*球员添加*/
		.playerModify{
			padding: 15px;
			background-color: #fff;
			box-sizing: border-box;
			position: absolute;
			opacity: 0.97;
			z-index: 9999;
			border: 3px solid #2464b5;
		}
		.playerModify>p{
			display: inline-block;
			width: 100%;
			position: relative;
		}
		.playerModify>p span{
			display: inline-block;
			float: right;
			color: #bbb;
			position: absolute;
			bottom: 0px;
			right: 0px;
			cursor: pointer;
		}
		.playerModify>p span:hover{
			color: red;
		}
		.playerModify table{
			margin: 10px auto;
		}
		.playerModify table tr td:nth-of-type(1){
			text-align: right;
		}
		#file{
			display: none;
		}
		.playerModify form p{
			text-align: right;
		}
		.playerModify form p input{
			background-color:#ccc;
			color: #2464b5;
			font-weight: bold;
			box-sizing: border-box;
			margin-right:10px;
		}
		.playerModify form p input:hover{
			background-color:#2464b5;
			color: #fff;
		}

					
	</style>
</head>
<body>
	<div class="box">
		
		<!--球员修改-->
		<div class="playerModify">
			<p>
				修改球员
				<span onclick="tobghome()">×</span>
			</p>
			<form action="playerServlet.do?opt=3&playerId=${param.playerId }" method="post" enctype="multipart/form-data">
				<table>
					<tr>
						<td>球员:</td>
						<td><input type="text" name="playerName" value="${param.playerName }"></td>
					</tr>
					<tr>
						<td>英文名:</td>
						<td><input type="text" name="englishName" value="${param.englishName}"></td>
					</tr>
					<tr class="fileTr">
						<td>头像:</td>
						<td>
							<input type="file" name="playerTitl" id="file" onchange="showPic(this)">
							<img src="${param.playerTitl}" id="addImg" onclick="fileClick(this)">
						</td>
					</tr>
					<tr class="fileTr">
						<td>全身照:</td>
						<td>
							<input type="file" name="playerBody" id="file" onchange="showPic(this)">
							<img src="${param.playerBody}" id="addImg" onclick="fileClick(this)">
						</td>
					</tr>
					<tr>
						<td>球队:</td>
						<td><input type="text" name="teamName" value="${param.teamName}"></td>
					</tr>
					<tr>
						<td>位置:</td>
						<td><input type="text" name="playerPosition" value="${param.playerPosition}"></td>
					</tr>
					<tr>
						<td>身高:</td>
						<td><input type="number" name="playerHeight" step="0.01" value="${param.playerHeight}"></td>
					</tr>
					<tr>
						<td>体重:</td>
						<td><input type="number" name="playerWeight" step="0.01"  value="${param.playerWeight}"></td>
					</tr>
					<tr>
						<td>球号:</td>
						<td><input type="number" name="playerNum" value="${param.playerNum}"></td>
					</tr>
					<tr>
						<td>国籍:</td>
						<td><input type="text" name="playerNation" value="${param.playerNation}"></td>
					</tr>
					<tr>
						<td>生日:</td>
						<td><input type="date" name="playerDate" value="${param.playerDate}"></td>
					</tr>
					<tr>
						<td>选秀:</td>
						<td><input type="number" name="playerDraft" value="${param.playerDraft}" oninput="if(this.value>=2050) this.value = 2050;if(this.value<=1919) this.value = 1919"></td>
					</tr>
					<tr>
						<td>经验:</td>
						<td><input type="number" name="playerExp" value="${param.playerExp}"></td>
					</tr>
					<tr>
						<td>NBA前:</td>
						<td><input type="text" name="playerBefore" value="${param.playerBefore}"></td>
					</tr>
					<tr>
						<td>类型:</td>
						<td>
							<select name="typeName">
								<option value="0" selected="selected">-请选择-</option>
								<option value="4">现役</option>
								<option value="5">退役</option>	
								<option value="6">历史</option>
							</select>
						</td>
					</tr>
				</table>
				<p class="submitP">
					<input type="button" name="" value="取消" onclick="tobghome()">
					<input type="submit" name="" value="确定">
				</p>
			</form>	
		</div>

</body>
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript" src="JS/bghome.js"></script>
<script type="text/javascript">
	function $$(id){
		return document.getElementById(id);
	}
	function fileClick(o){
		o.previousElementSibling.click();
	}
	
	function showPic(obj) {
        var fileUrl = getObjectURL(obj.files[0]);

		console.log(fileUrl);
        if (fileUrl != null) {
            obj.nextElementSibling.src = fileUrl;
            
        }else{
        	 obj.nextElementSibling.src="images/add.jpg"
        }
    }
    //建立一个可存取到该file的url
    function getObjectURL(file) {
        var url = null;
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
        if (window.createObjectURL != undefined) {   // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) {        // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {  // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url;

      }
    function tobghome(){
		window.location.href="/nba/SearchServlet.do"
	}
</script>
</html>